<template>
	<view class="details-page">
		<u-navbar title-style="color:#fff" left-icon-color="#fff" bgColor="rgba(0,0,0,0.0)" :autoBack="true"></u-navbar>
		<view class="top-bg">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(item,index) in info.photos" :key="index">
					<image class="details-bg" :src="'https://m.lqvvvv.com'+item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="content">
				<view class="title">
					{{info.title}}
				</view>
				<view class="job">
					<view class="job-item">
						营业中
					</view>
					<view class="job-item">
						{{info.service_time}}
					</view>
				</view>
				<view class="plan">
					<view class="plan-left">
						<view class="plan-item" v-for="(item,index) in info.tags" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="evaluate">
					<view class="evaluate-left">
						<view class="evaluate-info">
							<view class="info-num">
								{{info.points}}
							</view>
							<view>
								好
							</view>
						</view>
						<view class="evaluate-text">
							{{info.intro}}
						</view>
					</view>
				</view>
				<view class="map">
					<view class="map-left">
						<view class="map-title">
							<view>
								{{info.address}}
							</view>
						</view>
						<view class="distance">
							<u-icon name="map-fill" color="#2D2D2D" size="20"></u-icon>
							<view class="distance-text">
								距离您{{info.distance}}公里
							</view>
						</view>
					</view>
					<view class="map-right" @click="goopen">
						<image src="https://m.lqvvvv.com/assets/static/business/map.png" mode=""></image>
						<view>
							地图/打车
						</view>
					</view>
				</view>
				<view class="shop">
					<view class="shop-item" v-for="(item,index) in list" :key="index">
						<image :src="'https://m.lqvvvv.com/'+item.images" mode="aspectFill"></image>
						<view class="shop-right">
							<view class="right-title">
								<view class="title">
									{{item.name}}
								</view>
							</view>
							<view class="assess">
								<view class="assess-num">
									{{info.points}}
								</view>
								<view>
									免预约
								</view>
							</view>
							<view class="shop-tips">
								{{item.intro}}
							</view>
							<view class="feature">
								<view class="feature-item" v-for="(item,index) in info.tags" :key="index">
									{{item}}
								</view>
							</view>
							<view class="price">
								<view class="price-left">
									<view class="price-del">
										￥{{item.market_price}}
										<view class="price-num">
											￥ <text>{{item.price}}</text>
										</view>
										起
									</view>
								</view>
								<view class="price-right" @click="gopay(item)" v-if="userinfo.is_adolescent == 0">
									抢购
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				id: '',
				info: {},
				list: [],
				userinfo:{}
			}
		},
		computed: {
			...mapState({
				location: state => state.location,
			})
		},
		onLoad(e) {
			this.id = e.id
			this.postdetail()
			this.postlist()
		},
		onShow() {
			let token = uni.getStorageSync("token") || '';
			if (token != '') {
				this.getuserinfo()
			}
		},
		
		methods: {
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data
					} else {
						this.userinfo = {}
					}
				})
			},
			gopay(item) {
				this.$navTo.togo('/pages/my/order/business-order', {
					info: JSON.stringify(item),
					shopinfo: JSON.stringify(this.info)
				});
			},
			goopen() {
				let app = this
				uni.openLocation({
					latitude: Number(app.info.lat), // 目的地的纬度
					longitude: Number(app.info.lng), // 目的地的经度
					scale: 18, // 地图的缩放级别
					address: app.info.address, // 目的地的地址
					success: function() {
						console.log('成功打开地图导航');
					},
					fail: function(err) {
						console.error('打开地图导航失败', err);
					}
				});
			},
			postlist() {
				let params = {
					shop_id: this.id
				}
				this.$Request({
					method: 'POST',
					url: '/api/shop_product/getList',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.data
					}
				})
			},
			postdetail() {
				let params = {
					lat: this.location.latitude,
					lng: this.location.longitude,
					shop_id: this.id
				}
				this.$Request({
					method: 'POST',
					url: '/api/user_shop/getDetail',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.info.tags = this.info.tags.split(',').map(tag => tag.trim());
						this.info.photos = this.info.photos.split(',').map(tag => tag.trim());
					}
				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.details-page {
		position: relative;

		.top-bg {
			.swiper {
				height: 749rpx;

				.details-bg {
					width: 100%;
					height: 749rpx;
				}
			}
		}

		.content {
			width: 100%;
			position: absolute;
			top: 650rpx;
			left: 0;
			right: 0;
			padding: 30rpx;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			background-color: #F7F8FC;

			.title {
				font-size: 36rpx;
				color: #2D2D2D;
				font-weight: bold;
			}

			.job {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.job-item {
					color: #5755F2;
					font-size: 24rpx;
					padding: 10rpx 15rpx;
					background-color: #DDDDFF;
					border-radius: 10rpx;
					margin-right: 30rpx;
				}

			}

			.plan {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.plan-left {
					display: flex;

					.plan-item {
						font-size: 24rpx;
						color: #000000;
						padding: 0 15rpx;
						border-right: 1rpx solid #E4E4F8;
					}

					.plan-item:last-child {
						border: none;
					}
				}
			}

			.evaluate {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;

				.evaluate-left {
					display: flex;
					align-items: center;

					.evaluate-info {
						width: 140rpx;
						background-color: #E7E7FF;
						display: flex;
						align-items: center;
						color: #5755F2;
						font-size: 24rpx;
						border-radius: 30rpx;
						justify-content: space-between;
						padding-right: 20rpx;

						.info-num {
							width: 79rpx;
							height: 48rpx;
							background-image: url('https://m.lqvvvv.com/assets/static/business/rate.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							text-align: center;
							line-height: 48rpx;
							font-size: 36rpx;
							color: #ffffff;
						}
					}

					.evaluate-text {
						margin-left: 10rpx;
						color: #5755F2;
						font-size: 24rpx;
					}

				}
			}

			.map {
				padding: 20rpx;
				background: rgba(207, 207, 232, 0.14);
				border-radius: 20rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.map-left {
					font-size: 24rpx;

					.map-title {
						color: #2D2D2D;
						display: flex;
						font-weight: bold;
					}

					.line {
						width: 2rpx;
						height: 24rpx;
						background-color: #E4E4F8;
						margin: 0 15rpx;
					}

					.distance {
						display: flex;
						align-items: center;
						color: #9799AC;
						font-size: 24rpx;
						margin-top: 20rpx;

						.distance-text {
							margin-left: 10rpx;
						}
					}

				}

				.map-right {
					font-size: 24rpx;
					color: #5755F2;
					text-align: center;

					image {
						width: 61rpx;
						height: 61rpx;
					}
				}
			}

			.shop {
				margin-top: 20rpx;

				.shop-item {
					border-radius: 30rpx;
					padding: 10rpx;
					background-color: #ffffff;
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					image {
						width: 200rpx;
						height: 245rpx;
						border-radius: 20rpx;
					}

					.shop-right {
						width: 65%;
						margin-left: 20rpx;

						.right-title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.title {
								font-size: 28rpx;
								color: #000000;
								font-weight: bold;
							}

							.time {
								font-size: 24rpx;
								color: #6D6D6D;
							}
						}

						.assess {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #2D2D2D;
							font-weight: bold;
							margin-top: 20rpx;

							.assess-num {
								font-size: 20rpx;
								color: #ffffff;
								font-weight: bold;
								background-color: #5755F2;
								border-radius: 5rpx 5rpx 14rpx 5rpx;
								padding: 5rpx 10rpx;
								margin-right: 15rpx;
							}
						}

						.shop-tips {
							font-size: 24rpx;
							color: #939393;
							padding: 10rpx 0;
						}

						.feature {
							display: flex;

							.feature-item {
								border: 1rpx solid #5755F2;
								padding: 5rpx 10rpx;
								border-radius: 10rpx;
								font-size: 20rpx;
								margin-right: 20rpx;
								color: #5755F2;
							}
						}

						.price {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 20rpx;

							.price-left {
								.price-del {
									display: flex;
									align-items: center;
									color: #6D6D6D;
									font-size: 24rpx;

									.price-num {
										color: #FF5959;

										text {
											font-weight: bold;
											font-size: 36rpx;
										}
									}
								}
							}

							.price-right {
								background: linear-gradient(360deg, #5755F2 0%, #8381FF 100%);
								font-size: 26rpx;
								color: #ffffff;
								padding: 10rpx 25rpx;
								border-radius: 30rpx;
							}
						}

					}
				}
			}
		}
	}
</style>